<template>
	<view class="housekeeping-detail-wrapper">
		<custom-header-bar title="简历详情" backStatus="1" bg="1"></custom-header-bar>
		<div class="content-box" v-if="Housedetkeep.name">
			<div class="info-detail">
				<image :src="Housedetkeep.iconUrl" class="photo" mode="aspectFill"></image>
				<div class="info-wrapper">
					<div class="name-address">
						<span class="name">{{ Housedetkeep.name }}</span>
						<span class="address" style="margin-left: 15upx">{{ Housedetkeep.addressOneStr
              }}{{ Housedetkeep.addressTwoStr }}</span>
					</div>
					<div class="work-info">
						<div class="item" v-if="Housedetkeep.yearNum">
							{{ Housedetkeep.yearNum }}年
						</div>
						<div class="item" v-if="Housedetkeep.contents">
							{{ Housedetkeep.contents }}
						</div>
						<div class="item" v-if="Housedetkeep.age">
							{{ Housedetkeep.age }}岁
						</div>
					</div>
					<div class="money">
						<div class="rmb">¥</div>
						<div class="num">{{ Housedetkeep.serveMoney }}</div>
						<div class="danwei">{{ Housedetkeep.serveMoneyStr }}</div>
					</div>
				</div>
			</div>
			<div class="personal-profile">
				<div class="title">健康状况</div>
				<div class="detail">核酸检测：阴性</div>
				<div class="detail">疫苗接种：已接种疫苗</div>
			</div>
			<div class="personal-profile">
				<div class="title">个人展示</div>
				<div class="detail">{{ Housedetkeep.explainStr }}</div>
				<div class="img-list">
					<u-album singleSize="480" singleMode="scaleToFill" multipleSize="180" multipleMode="scaleToFill"
						:urls="urls2"></u-album>
				</div>
			</div>
			<div class="work-experience">
				<div class="title">工作经验</div>
				<div class="list-wrapper">
					<div class="item-wrapper" v-for="(item, index) in historyList" :key="index">
						<div class="tag"></div>
						<div class="title-wrapper">
							<span class="word">{{ item.laborerTypeStr }}</span>
							<span class="time">{{ item.timeStart }}——{{ item.timeEnd }}</span>
						</div>
						<div class="detail">
							{{ item.historyDetail }}
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="button-yuyue">
			<button type="default" @click="yuyueTimeShow = true" class="button">
				立即预约
			</button>
		</div>
		<u-popup :show="yuyueTimeShow" mode="bottom" @close="yuyueTimeShow = false">
			<view class="time-range-choose">
				<div class="title">预约时段</div>
				<div class="day-wrapper">
					<div class="day" :class="{'active': item.day == daysss }" v-for="(item, index) in dayList"
						:key="index" @click="gettime(item, index)">
						<div class="week">{{ item.week }}</div>
						<div class="date">{{ item.day }}</div>
					</div>
				</div>
				<!-- class="time disable active" -->
				<div class="time-wrapper">
					<div class="time"
						:class="{'active': shiduansss.includes(item.time),'disable':selectList.includes(daysss+' '+item.time)}"
						v-for="(item, index) in TimeList" :key="index" @click="getshiduan(item, index)">
						{{ item.time }}
					</div>
				</div>
				<div class="button-list">
					<button type="default" class="button cancel" @click="yuyueTimeShow = false">
						取消
					</button>
					<button type="default" @click="submitOrder" class="button confirm">
						确定
					</button>
				</div>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		Getlistdet,
		getSelectTime
	} from "@/api/housekeeping";
	import {
		PICTURE_URL
	} from "../../utils/config.js";
	const WeekList = {
		0: "星期日",
		1: "星期一",
		2: "星期二",
		3: "星期三",
		4: "星期四",
		5: "星期五",
		6: "星期六",
	};
	import dayjs from "dayjs";
	import CustomHeaderBar from "@/components/custom-header-bar.vue";
	import {
		ForceLogin
	} from "@/utils/filter.js";
	export default {
		components: {
			CustomHeaderBar,
		},
		data() {
			return {
				historyList: [],
				imgurl: PICTURE_URL,
				keepid: "",
				Housedetkeep: {},
				yuyueTimeShow: false,
				urls2: [],
				dayList: [],
				TimeList: [],
				active: 0,
				activesss: 0,
				daysss: "",
				shiduansss: [],
				userby: {},
				selectList: [],
				defaultList: []
			};
		},
		onLoad: function(option) {
			this.keepid = option.id;
		},
		onShow() {
			this.getDay();
			this.daysss = this.dayList[0].day;
			if (this.keepid) {
				this.getlistdet();
			}
		},
		methods: {
			getDay() {
				let arr = [];
				for (let i = 0; i < 31; i++) {
					arr.push({
						week: WeekList[
							dayjs()
							.add(i + 1, "day")
							.day()
						],
						day: dayjs()
							.add(i + 1, "day")
							.format("MM-DD"),
						id: dayjs()
							.add(i + 1, "day")
							.format("MM-DD"),
					});
				}
				arr[0].week = "明天";
				this.dayList = arr;
			},
			getSelectTime() {
				getSelectTime(this.keepid).then((res) => {
					if (res.data.code === 200) {
						let Time = []
						res.data.data.forEach((item) => {
							if (item.orderSuccessType === 2) return
							item.month = this.parseTime(item.subDate, "{m}-{d}");
							let times = item.subTime.split(',')
							let timesArr = times.map((itemtime) => {
								return item.month + ' ' + itemtime
							})
							Time = Time.concat(timesArr)
						});
						this.selectList = Time;
					}
				});
			},
			// 详情
			getlistdet() {
				Getlistdet(this.keepid).then((res) => {
					if (res.data.code == 200) {
						this.Housedetkeep = res.data.data;
						res.data.data.timesList.sort(this.bySort);
						const TimeList = [];
						res.data.data.timesList.forEach((item) => {
							TimeList.push({
								time: item,
								disabled: false
							});
						});
						this.defaultList = JSON.parse(JSON.stringify(TimeList))
						this.TimeList = TimeList;
						this.getSelectTime();
						this.urls2 = []
						res.data.data.imgUrlList.split(",").forEach((item) => {
							let obj = {
								imgs: item,
							};
							this.urls2.push(obj.imgs);
						});
						this.historyList = res.data.data.historyList;
					}
				});
			},
			bySort(a, b) {
				a = Number(a.split(":")[0]);
				b = Number(b.split(":")[0]);
				return a - b;
			},
			gettime(item, index) {
				this.TimeList = JSON.parse(JSON.stringify(this.defaultList))
				this.daysss = item.day;
				this.shiduansss = []
			},
			getshiduan(item, index) {
				if (this.selectList.includes(this.daysss + ' ' + item.time)) return
				if (this.shiduansss.includes(item.time)) {
					this.shiduansss.splice(this.shiduansss.indexOf(item.time), 1);
				} else {
					this.shiduansss.push(item.time);
				}
			},
			submitOrder() {
				if (ForceLogin() === false) {
					return;
				}
				if (this.shiduansss.length === 0) {
					uni.$u.toast("请选择时间段");
					return;
				}
				let year = new Date().getFullYear();
				this.shiduansss = this.shiduansss.sort()
				uni.navigateTo({
					url: "/pages/housekeeping/order/index?id=" +
						this.keepid +
						"&daysss=" +
						year + '-' + this.daysss +
						"&shiduansss=" +
						this.shiduansss
				});
				this.shiduansss = []
				this.yuyueTimeShow = false;
			},
			parseTime(time, pattern) {
				if (arguments.length === 0 || !time) {
					return null;
				}
				const format = pattern || "{y}-{m}-{d} {h}:{i}:{s}";
				let date;
				if (typeof time === "object") {
					date = time;
				} else {
					if (typeof time === "string" && /^[0-9]+$/.test(time)) {
						time = parseInt(time);
					} else if (typeof time === "string") {
						time = time
							.replace(new RegExp(/-/gm), "/")
							.replace("T", " ")
							.replace(new RegExp(/\.[\d]{3}/gm), "");
					}
					if (typeof time === "number" && time.toString().length === 10) {
						time = time * 1000;
					}
					date = new Date(time);
				}
				const formatObj = {
					y: date.getFullYear(),
					m: date.getMonth() + 1,
					d: date.getDate(),
					h: date.getHours(),
					i: date.getMinutes(),
					s: date.getSeconds(),
					a: date.getDay(),
				};
				const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
					let value = formatObj[key];
					// Note: getDay() returns 0 on Sunday
					if (key === "a") {
						return ["日", "一", "二", "三", "四", "五", "六"][value];
					}
					if (result.length > 0 && value < 10) {
						value = "0" + value;
					}
					return value || 0;
				});
				return time_str;
			},
		},
	};
</script>

<style lang="scss">
	.housekeeping-detail-wrapper {
		min-height: 100vh;
		background-color: #f4f4f4;
		padding-top: 160upx;
		padding-bottom: 120upx;
		box-sizing: border-box;

		.content-box {
			padding: 24upx;

			.info-detail {
				padding: 30upx;
				display: flex;
				background-color: #ffffff;
				border-radius: 30upx;

				.photo {
					flex: 0 0 140upx;
					margin-right: 24upx;
					width: 140upx;
					height: 180upx;
					border-radius: 10upx;
				}

				.info-wrapper {
					display: flex;
					flex-direction: column;
					justify-content: center;

					.name-address {
						font-size: 32upx;
						color: #484848ff;
					}

					.work-info {
						display: flex;
						margin-top: 24upx;

						.item {
							height: 28upx;
							line-height: 28upx;
							padding: 0 16upx;
							color: #000000a6;
							font-size: 28upx;
							border-right: 2upx solid #d1d1d6ff;

							&:last-child {
								border: none;
							}
						}
					}

					.money {
						margin-top: 24upx;
						display: flex;
						align-items: baseline;

						.rmb {
							color: #dc3338;
							font-size: 26upx;
						}

						.num {
							color: #dc3338;
							font-size: 36upx;
						}

						.danwei {
							color: #999999ff;
							font-size: 28upx;
						}
					}
				}
			}

			.personal-profile {
				margin-top: 24upx;
				padding: 30upx;
				background-color: #ffffff;
				border-radius: 30upx;

				.title {
					font-size: 32upx;
				}

				.detail {
					margin-top: 16upx;
					color: #484848ff;
					font-size: 26upx;
				}

				.img-list {
					margin-top: 24upx;
				}
			}

			.work-experience {
				margin-top: 24upx;
				padding: 30upx;
				background-color: #ffffff;
				border-radius: 30upx;

				.title {
					font-size: 32upx;
				}

				.list-wrapper {
					.item-wrapper {
						margin-top: 24upx;
						position: relative;
						padding-left: 32upx;

						.tag {
							position: absolute;
							top: 16upx;
							left: 0;
							width: 12upx;
							height: 12upx;
							background: #80d7ce;
							border-radius: 12upx;
						}

						.title-wrapper {
							.word {
								display: inline-block;
								margin-right: 12upx;
								font-size: 32upx;
							}

							.time {
								font-size: 24upx;
								color: #999999;
							}
						}

						.detail {
							margin-top: 12upx;
							color: #484848ff;
							font-size: 26upx;
						}
					}
				}
			}
		}

		.button-yuyue {
			position: fixed;
			bottom: 0;
			width: 100%;
			text-align: center;
			height: 120upx;
			box-shadow: 0px 4px 20px 1px rgba(0, 0, 0, 0.1);
			background-color: #f4f4f4;

			.button {
				margin-top: 20upx;
				width: 337upx;
				height: 80upx;
				line-height: 80upx;
				background: #61d7ca;
				border-radius: 10upxu;
				font-size: 34upx;
				color: #ffffff;
			}
		}

		.time-range-choose {
			padding: 30upx;

			.title {}

			.day-wrapper {
				margin-top: 24upx;
				display: flex;
				align-items: center;
				overflow-x: auto;

				.day {
					width: 120upx;
					color: #484848ff;
					font-size: 28upx;
					text-align: center;
					flex-shrink: 0;

					&.active {
						color: #33ccacff;
					}
				}
			}

			.time-wrapper {
				margin-top: 24upx;
				display: flex;
				text-align: center;
				flex-wrap: wrap;

				.time {
					margin: 6upx;
					width: 220upx;
					height: 80upx;
					line-height: 76upx;
					background: #f4f4f4;
					border-radius: 10upx;
					border: 2upx solid #f4f4f4;
					box-sizing: border-box;
					border: 1px solid #33ccac;
					background-color: #ffffff;
					color: #00000073;
					font-size: 28upx;

					&.disable {
						background: #f4f4f4;
						border: 1px solid #f4f4f4;
					}

					&.active {
						background: #61d7ca;
						color: #ffffff;
					}
				}
			}

			.button-list {
				margin-top: 48upx;
				display: flex;
				justify-content: space-between;

				.button {
					width: 300upx;
					height: 80upx;
					line-height: 80upx;
					font-size: 34upx;

					&.cancel {
						color: #666666;
						background: #f2f2f2;
					}

					&.confirm {
						color: #ffffff;
						background: #61d7ca;
					}
				}
			}
		}
	}

	.active {
		color: #33ccacff;
	}

	.activesss {
		margin: 6upx;
		width: 158upx;
		height: 80upx;
		line-height: 76upx;
		border-radius: 10upx;
		border: 2upx solid #f4f4f4;
		box-sizing: border-box;
		border: 1px solid #33ccac;
		background-color: #ffffff;
		font-size: 28upx;
		background: #61d7ca;
		color: #ffffff;
	}
</style>
